﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GrowthRecordIndex.aspx.cs" Inherits="WanPiJie.WebSite.MyBaby.GrowthRecordIndex" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>成长记录-顽皮街</title>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
	<link href="http://static.wanpijie.com/styles/global.css" rel="stylesheet" type="text/css" />
	<link href="http://static.wanpijie.com/styles/www.css" rel="stylesheet" type="text/css" />
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js" type="text/javascript"></script>
	<script src="http://static.wanpijie.com/scripts/jquery.cookie.min.js" type="text/javascript"></script>
	<script src="http://static.wanpijie.com/scripts/global.js" type="text/javascript"></script>
</head>
<body>
	<form id="form1" runat="server">
	<wpj:SiteHeader ID="SiteHeader" runat="server" />
	<div id="mainContent" class="wrap">
		<h2 class="box2-title">
			成长记录</h2>
		<div class="main-panel b">
			<div class="gr-box">
				<a href="javascript:grathSwitch('height');">身高曲线</a> | <a href="javascript:grathSwitch('weight');">体重曲线</a>
				<div id="growthGraph" style="width: 700px; height: 300px">
				</div>
				<div class="gr-list bb">
					<% if (this.GrowthRecords.Count != 0) %>
					<% { %>
					<asp:Repeater ID="Repeater1" runat="server">
						<HeaderTemplate>
							<table>
						</HeaderTemplate>
						<ItemTemplate>
							<tr>
								<td>
									<span class="gr-age">
										<%# BabyExtension.GetIntervalInfoAfterBirth(Baby, (DateTime)Eval("SurveyDate")) %></span>
								</td>
								<td>
									身长
									<%# Eval("Height")%>厘米，
								</td>
								<td>
									体重
									<%# Eval("Weight")%>千克，
								</td>
								<td>
									头围
									<%# Eval("HeadSize")%>厘米，
								</td>
								<td>
									胸围
									<%# Eval("ChestSize")%>厘米,
								</td>
								<td>
									<%# Eval("SurveyDate", "{0:yyyy-MM-dd}")%>
								</td>
							</tr>
						</ItemTemplate>
						<FooterTemplate>
							</table></FooterTemplate>
					</asp:Repeater>
				</div>
				<p style="padding-top: 20px;">
					<a class="btn" href="AddGrowthRecord.aspx"><span>立即添加</span></a></p>
				<% } %>
				<% else %>
				<% { %>
				<p>
					你还没有添加宝宝出生体格信息, <a class="fbox" href="AddGrowthRecord-f.aspx?babyid=<%= this.Baby.Id %>">立即添加</a>
				</p>
				<% } %>
			</div>
		</div>
		<div class="panel">
			<wpj:UserPanel ID="UserPanel" runat="server" />
		</div>
	</div>
	<wpj:SiteFooter ID="SiteFooter" runat="server" />
	</form>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/jquery-ui.min.js"></script>
	<script src="../Scripts/highcharts.js" type="text/javascript"></script>
	<script type="text/javascript">
		var heightJS = <%= this.HeightJS %>;
		var weightJS = <%= this.WeightJS %>;

		var options={
		height:{
				chart: {
					renderTo: 'growthGraph',
					type: 'spline',
					inverted: true,
					style: {
						margin: '0 auto'
					}
				},
				title: {
					text: '身高曲线'
				},
				subtitle: {
					text: 'CM'
				},
				xAxis: {
					min: 0,
					showFirstLabel: false,
					reversed: false,
					labels: {
						formatter: function () {
							return this.value;
						}
					},
					title: {
						enabled: true,
						text: '身高（CM）'
					},
					maxPadding: 0.05,
					showLastLabel: true
				},
				yAxis: {
					min: 0,
					allowDecimals:false,
					title: {
						text: '年龄段'
					},
					labels: {
						formatter: function () {
							return this.value + '天';
						}
					},
					lineWidth: 1
				},
				legend: {
					enabled: false
				},
				tooltip: {
					formatter: function () {
						return '' +
                        this.y + '天：' + this.x + ' cm';
					}
				},
				plotOptions: {
					spline: {
						marker: {
							enable: false
						}
					}
				}
			},
			Weight:{
				chart: {
					renderTo: 'growthGraph',
					type: 'spline',
					inverted: true,
					style: {
						margin: '0 auto'
					}
				},
				title: {
					text: '体重曲线'
				},
				subtitle: {
					text: 'KG'
				},
				xAxis: {
					min: 0,
					showFirstLabel: false,
					reversed: false,
					title: {
						enabled: true,
						text: '体重（KG）'
					},
					labels: {
						formatter: function () {
							return this.value;
						}
					},
					maxPadding: 0.05,
					showLastLabel: true
				},
				yAxis: {
					min: 0,
					allowDecimals:false,
					title: {
						text: '年龄段'
					},
					labels: {
						formatter: function () {
							return this.value + '天';
						}
					},
					lineWidth: 2
				},
				legend: {
					enabled: false
				},
				tooltip: {
					formatter: function () {
						return '' +
                        this.y + '天：' + this.x + ' kg';
					}
				},
				plotOptions: {
					spline: {
						marker: {
							enable: false
						}
					}
				}
			}
		};

		var chart;
		function grathSwitch(flag) {
				if(flag=='weight')
				{
					chart = new Highcharts.Chart(options.Weight);
						chart.addSeries({data:weightJS});
				}
				else if(flag=="height")
				{
						chart = new Highcharts.Chart(options.height);
						chart.addSeries({data:heightJS});
				}
		}

		$(function () {		
			grathSwitch('height');
		});
	</script>
</body>
</html>
